<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/header.css">
    <link rel="stylesheet" href="./css/footer.css">
    <link rel="stylesheet" href="./css/buy.css">
    <title>购票-小黑电影</title>
</head>

<body>
    <!-- 头部开始 -->
    <div class="header">
        <div class="header-inner">
            <h1 class="logo">
            </h1>
            <div class="city">
                <span>郑州</span>
                <span class="icon"></span>
                <div class="城市列表">
                </div>
            </div>
            <a href="./index.html">首页</a>
            <a href="./movie.html">电影</a>
            <a href="./cinema.html">影院</a>
            <a href="./perform.html">演出</a>
            <a href="#">榜单</a>
            <a href="#">热点</a>
            <a href="#">商城</a>
            <div class="search">
                <input type="text" placeholder="找影视剧、影人、影院">
            </div>
            <a href="#" class="user"><span class="icon"></span></a>
        </div>
    </div>
    <!-- 头部结束 -->
    <!-- 影院介绍开始 -->
    <div class="banner" id="but-ticket">
        <div class="banner-inner">
            <div class="img-box">
                <img src="./images/source/cinema.png" id="movieImg" alt="">
            </div>
            <div class="tittle">
                <h2 id="name">CGV影城（YOYOPARK激光IMAX店）</h2>
                <p>
                    金水区某某某路
                </p>
                <p>
                    电话：888888888
                </p>
                <div class="bottom">
                    <h3>影院服务</h3>
                    <p><span>改签</span>未取票用户放映前60分钟可改签</p>
                    <p><span>儿童优惠</span>1.3米以下儿童普通厅免费无座观影，一名成人限带一名儿童，IMAX、4DX特效厅儿童需购买影票</p>
                    <p><span>可停车</span>YOYOPARK购物公园停车场，停车15分钟内免费，前2个小时内5元，超1小时</p>
                </div>
            </div>
        </div>
    </div>
    <!-- 影院介绍结束 -->
    <!-- 日期开始 -->
    <div class="data-time">
        <p>
            观影时间：
            <span class="active" id="fir">今天8月4</span>
            <span id="sec">明天8月5</span>
            <span id="thr">后天8月6</span>
        </p>
    </div>
    <!-- 日期结束 -->
    <!-- 场次开始 -->
    <table class="table1" id="table1">
        <thead>
            <th>放映时间</th>
            <th>语言版本</th>
            <th>放映厅</th>
            <th>售价（元）</th>
            <th>选座购票</th>
        </thead>
        <tbody>
            <tr>
                <td>
                    <span>16:20</span>
                    <i>18:19散场</i>
                </td>
                <td>英语2D</td>
                <td>
                    1厅
                </td>
                <td>
                    <span>￥40</span>
                </td>
                <td>
                    <a href="#">选座购票</a>
                </td>
            </tr>
            <tr>
                <td>
                    <span>17:15</span>
                    <i>19:14散场</i>
                </td>
                <td>英语IMAX2D</td>
                <td>
                    IMAX激光厅
                </td>
                <td>
                    <span>￥69</span>
                </td>
                <td>
                    <a href="#">选座购票</a>
                </td>
            </tr>
            <tr>
                <td>
                    <span>17:45</span>
                    <i>19:44散场</i>
                </td>
                <td>英语2D</td>
                <td>
                    3厅
                </td>
                <td>
                    <span>￥40</span>
                </td>
                <td>
                    <a href="#">选座购票</a>
                </td>
            </tr>
            <tr>
                <td>
                    <span>18:35</span>
                    <i>20:34散场</i>
                </td>
                <td>英语2D</td>
                <td>
                    1厅
                </td>
                <td>
                    <span>￥40</span>
                </td>
                <td>
                    <a href="#">选座购票</a>
                </td>
            </tr>
            <tr>
                <td>
                    <span>19:25</span>
                    <i>21:24散场</i>
                </td>
                <td>英语IMAX2D</td>
                <td>
                    IMAX激光厅
                </td>
                <td>
                    <span>￥69</span>
                </td>
                <td>
                    <a href="#">选座购票</a>
                </td>
            </tr>
            <tr>
                <td>
                    <span>20:00</span>
                    <i>21:59散场</i>
                </td>
                <td>英语2D</td>
                <td>
                    3厅
                </td>
                <td>
                    <span>￥69</span>
                </td>
                <td>
                    <a href="#">选座购票</a>
                </td>
            </tr>
        </tbody>
    </table>
    <table class="table2 unshow" id="table2">
        <thead>
            <th>放映时间</th>
            <th>语言版本</th>
            <th>放映厅</th>
            <th>售价（元）</th>
            <th>选座购票</th>
        </thead>
        <tbody>
            <tr>
                <td>
                    <span>10:15</span>
                    <i>12:14散场</i>
                </td>
                <td>英语IMAX2D</td>
                <td>
                    1厅
                </td>
                <td>
                    <span>￥50</span>
                </td>
                <td>
                    <a href="#">选座购票</a>
                </td>
            </tr>
            <tr>
                <td>
                    <span>11:00</span>
                    <i>12:59散场</i>
                </td>
                <td>英语IMAX2D</td>
                <td>
                    IMAX激光厅
                </td>
                <td>
                    <span>￥60</span>
                </td>
                <td>
                    <a href="#">选座购票</a>
                </td>
            </tr>
            <tr>
                <td>
                    <span>11:45</span>
                    <i>13:44散场</i>
                </td>
                <td>英语2D</td>
                <td>
                    3厅
                </td>
                <td>
                    <span>￥43</span>
                </td>
                <td>
                    <a href="#">选座购票</a>
                </td>
            </tr>
            <tr>
                <td>
                    <span>13:15</span>
                    <i>15:14散场</i>
                </td>
                <td>英语IMAX2D</td>
                <td>
                    1厅
                </td>
                <td>
                    <span>￥41</span>
                </td>
                <td>
                    <a href="#">选座购票</a>
                </td>
            </tr>
            <tr>
                <td>
                    <span>14:00</span>
                    <i>15:59散场</i>
                </td>
                <td>英语IMAX2D</td>
                <td>
                    IMAX激光厅
                </td>
                <td>
                    <span>￥70</span>
                </td>
                <td>
                    <a href="#">选座购票</a>
                </td>
            </tr>
            <tr>
                <td>
                    <span>16:20</span>
                    <i>18:19散场</i>
                </td>
                <td>英语IMAX2D</td>
                <td>
                    3厅
                </td>
                <td>
                    <span>￥69</span>
                </td>
                <td>
                    <a href="#">选座购票</a>
                </td>
            </tr>
        </tbody>
    </table>
    <table class="table3 unshow" id="table3">
        <thead>
            <th>放映时间</th>
            <th>语言版本</th>
            <th>放映厅</th>
            <th>售价（元）</th>
            <th>选座购票</th>
        </thead>
        <tbody>
            <tr>
                <td>
                    <span>13:20</span>
                    <i>15:19散场</i>
                </td>
                <td>英语2D</td>
                <td>
                    激光厅
                </td>
                <td>
                    <span>￥39</span>
                </td>
                <td>
                    <a href="#">选座购票</a>
                </td>
            </tr>
            <tr>
                <td>
                    <span>16:15</span>
                    <i>18:14散场</i>
                </td>
                <td>英语IMAX2D</td>
                <td>
                    1厅
                </td>
                <td>
                    <span>￥49</span>
                </td>
                <td>
                    <a href="#">选座购票</a>
                </td>
            </tr>
            <tr>
                <td>
                    <span>16:45</span>
                    <i>18:44散场</i>
                </td>
                <td>英语2D</td>
                <td>
                    巨幕厅
                </td>
                <td>
                    <span>￥50</span>
                </td>
                <td>
                    <a href="#">选座购票</a>
                </td>
            </tr>
            <tr>
                <td>
                    <span>17:35</span>
                    <i>19:34散场</i>
                </td>
                <td>英语2D</td>
                <td>
                    5厅
                </td>
                <td>
                    <span>￥48</span>
                </td>
                <td>
                    <a href="#">选座购票</a>
                </td>
            </tr>
            <tr>
                <td>
                    <span>19:25</span>
                    <i>21:24散场</i>
                </td>
                <td>英语IMAX2D</td>
                <td>
                    IMAX激光厅
                </td>
                <td>
                    <span>￥69</span>
                </td>
                <td>
                    <a href="#">选座购票</a>
                </td>
            </tr>
            <tr>
                <td>
                    <span>21:00</span>
                    <i>22:59散场</i>
                </td>
                <td>英语2D</td>
                <td>
                    3厅
                </td>
                <td>
                    <span>￥69</span>
                </td>
                <td>
                    <a href="#">选座购票</a>
                </td>
            </tr>
        </tbody>
    </table>
    <!-- 场次结束 -->
    <!-- 底部开始 -->
    <div class="footer">
        <!-- 顶部开始 -->
        <div class="top">
            <dl>
                <dt algin="center">关于小黑电影事业群</dt>
                <dd><a href="./index.html" target="_parent">友情链接</a></dd>
                <dd><a href="./index.html" target="_parent">广告服务</a></dd>
                <dd><a href="./index.html" target="_parent">联系我们</a></dd>
            </dl>
            <dl>
                <dt>优酷热门</dt>
                <div>
                    <ul class="popular">
                        <li><a href="./index.html" target="_parent">购票</a></li>
                        <li><a href="./index.html" target="_parent">电影</a></li>
                        <li><a href="./index.html" target="_parent">影院</a></li>
                        <li><a href="./index.html" target="_parent">购票</a></li>
                        <li><a href="./index.html" target="_parent">电影</a></li>
                        <li><a href="./index.html" target="_parent">影院</a></li>
                        <li><a href="./index.html" target="_parent">购票</a></li>
                        <li><a href="./index.html" target="_parent">电影</a></li>
                        <li><a href="./index.html" target="_parent">影院</a></li>
                        <li><a href="./index.html" target="_parent">购票</a></li>
                        <li><a href="./index.html" target="_parent">电影</a></li>
                        <li><a href="./index.html" target="_parent">影院</a></li>
                        <li><a href="./index.html" target="_parent">购票</a></li>
                        <li><a href="./index.html" target="_parent">电影</a></li>
                        <li><a href="./index.html" target="_parent">影院</a></li>
                        <li><a href="./index.html" target="_parent">购票</a></li>
                        <li><a href="./index.html" target="_parent">电影</a></li>
                        <li><a href="./index.html" target="_parent">影院</a></li>
                    </ul>
                </div>
            </dl>
            <dl>
                <dt>产品中心</dt>
                <dd><a href="./index.html" target="_parent">PC客户端</a></dd>
                <dd><a href="./index.html" target="_parent">手机客户端</a></dd>
                <dd><a href="./index.html" target="_parent">视频云</a></dd>
            </dl>
            <dl>
                <dt>用户</dt>
                <dd><a href="./index.html" target="_parent">繁体版</a></dd>
                <dd><a href="./index.html" target="_parent">在线反馈</a></dd>
                <dd><a href="./index.html" target="_parent">侵权投诉</a></dd>
            </dl>
        </div>
        <!-- 中部开始 -->
        <div class="middle">
            <dl>
                <dd>网络文化经营许可证 经文网[2014]0934-234号</dd>
                <dd>网络110报警服务</dd>
                <dd>药品服务许可证(京)-经营-2015-0029</dd>
                <dd>节目制作经营许可证京字670号</dd>
            </dl>
            <dl>
                <dd>请使用者仔细阅读优酷《用户协议》、《隐私政策》、《版权声明》、《用户协议》、《用户协议》和历史协议文本</dd>
                <dd>Copyring@2023小黑xiaohei.com版权所有</dd>
            </dl>
            <dl>
                <dd>京ICP证060288号</dd>
                <dd>网络出版服务许可证</dd>
                <dd>北京互联网举报中心</dd>
                <dd>北京12318文化市场举报热线</dd>
            </dl>
            <dl>
                <dd><img src="./images/source/test_code.png" alt=""></dd>
            </dl>
        </div>
        <!-- 底部开始 -->
        <div class="bottom">
            <dl>
                <dt><img src="./images/footer/icon1.png" alt=""></dt>
                <dd>经营性网站备案信息</dd>
            </dl>
            <dl>
                <dt><img src="./images/footer/icon2.png" alt=""></dt>
                <dd>中国互联网诚信联盟</dd>
            </dl>
            <dl>
                <dt><img src="./images/footer/icon3.png" alt=""></dt>
                <dd>中国互联网举报中心</dd>
            </dl>
            <dl>
                <dt><img src="./images/footer/icon4.png" alt=""></dt>
                <dd>网络举报APP下载</dd>
            </dl>
            <dl>
                <dt><img src="./images/footer/icon5.png" alt=""></dt>
                <dd>京公网安备1100000</dd>
            </dl>
            <dl>
                <dt><img src="./images/footer/icon6.png" alt=""></dt>
                <dd>网络文化经营单位</dd>
            </dl>
            <dl>
                <dt><img src="./images/footer/icon7.png" alt=""></dt>
                <dd>暴恐音视频举报中心</dd>
            </dl>
        </div>
    </div>
    <!-- 底部结束 -->
    <script src="./js/getURL.js"></script>
    <script src="js/json.js"></script>
    <!-- 实现动态切换数据 -->
    <script>
        //根据id匹配影院名称        
        function getNameById(data, id) {
            for (let item of data) {
                if (item.id == id) {
                    return item.name;
                }
            }
            return null;
        }
        var id = getQueryParam('id');
        var name = getNameById(jsonData, id);
        var Cname = document.getElementById("name")
        var fir = document.getElementById("fir")
        var sec = document.getElementById("sec")
        var thr = document.getElementById("thr")
        var tab = document.getElementsByTagName("table")
        Cname.innerText = name;
        fir.onclick = function () {
            fir.classList.add("active");
            sec.classList.remove("active");
            thr.classList.remove("active");
            tab[0].classList.remove("unshow");
            tab[1].classList.add("unshow");
            tab[2].classList.add("unshow");
        }
        sec.onclick = function () {
            sec.classList.add("active");
            fir.classList.remove("active");
            thr.classList.remove("active");
            tab[1].classList.remove("unshow");
            tab[0].classList.add("unshow");
            tab[2].classList.add("unshow");
        }
        thr.onclick = function () {
            thr.classList.add("active");
            sec.classList.remove("active");
            fir.classList.remove("active");
            tab[2].classList.remove("unshow");
            tab[1].classList.add("unshow");
            tab[0].classList.add("unshow");
        }
    </script>
</body>

</html>